<template>
	<view>
		<view class="swipe" >
			 <up-swiper :list="list1" height="500rpx"></up-swiper>
			 <view class="in-butt">
				 <view class="bunav" v-for="(item,index) in nav" :key="index" @click="gotourl(item,index)">
					 <view class="">
						 <view class="navtitle">{{item.title}}</view>
						 <view class="navtext">{{item.text}}</view>
					 </view>
					 <image class="navimg" :src="item.pic" mode=""></image>
				 </view>
				 <view class="intitle">
					 <view class="">最新动态</view>
					 <view class="all" @click="handleAll"><text>全部</text><u-icon name="arrow-right" size="16"></u-icon></view>
				 </view>
				 <view v-if="Article==''" class="intext">--暂无数据--</view>
				 <view v-else>
					 <view class="artic" v-for="(item,index) in Article" :key="index" @click="handleDetail(item)">
					 	<image class="artimg" :src="item.image" mode="aspectFill"></image>
						<!-- <view class="">{{item.name}}</view> -->
					 </view>
				 </view>
			 </view>
			 <view style="height:140rpx;"></view>
		</view>
	</view>
	<cc-myTabbar :tabBarShow="0"></cc-myTabbar>
</template>

<script setup>
	// cyb
import {onReady,onLoad } from '@dcloudio/uni-app'
import { ref,onMounted } from 'vue';
import request from '../../utils/request';

onLoad(()=>{
	request.get('index/getSlides',{
		date:{
			type:'index'
		}
	}).then(res=>{
		console.log(res);
		console.log(res.data);
		list1.value = res.data.map(item => item.image);
	}).catch(err=>{
		console.log(err);
	})
	request.get('Document/index').then(res=>{
		console.log(res);
		Article.value=res.data.data
		console.log(Article.value);
	}).catch(err=>{
		console.log(err);
	})
})

let Article=ref([])
let list1 = ref([])
let nav = ref([
	{title:'球星入场',text:'线上购票、球馆预约',pic:'/static/iamges/组 3353.png',url:'/pages/entrance/entrance'},
	{title:'礼品卡包',text:'入场码、优惠券',pic:'/static/iamges/组 3355.png'},
	{title:'充值中心',text:'qp运动会员享折扣',pic:'/static/iamges/组 3356.png',url:'/pages/myvip/myvip'},
	{title:'运动赛事',text:'参与赛事赢好礼',pic:'/static/iamges/组 3360.png',url:'/pages/match/match'}
])
const gotourl=(item,index)=>{
	if(index==1){
		uni.switchTab({
			url:"/pages/qrcode/qrcode"
		})
	} else{
		uni.navigateTo({
			url:item.url
		})
	}
	
}

const handleDetail = (item) => {
	uni.navigateTo({
		url: '/pages/articleDetail/articleDetail?id=' + item.id
	})
}

const handleAll = () => {
	uni.navigateTo({
		url: '/pages/articleList/articleList'
	})
}
	onReady(()=>{
		uni.hideTabBar();
	})
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 140rpx;
	}
	.swipe{
		width: 100%;
		height: 100%;
		
	}
	.in-butt{
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f9f9f9;
		position: absolute;
		top:480rpx;
	}
	.bunav{
		width: 714rpx;
		height: 212rpx;
		margin: 0 auto;
		border-radius: 5rpx;
		background-color: #fff;
		margin-top: 28rpx;
		box-shadow:0 0 25px -15px rgba(0, 0, 0, .5);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.navimg{
		width: 112rpx;
		height: 112rpx;
		border-radius: 25%;
	}
	.navtitle{
		font-size: 22px;
	}
	.navtext{
		margin-top: 15rpx;
		font-size: 10px;
	}
	.intitle{
		width: 100%;
		height: 32rpx;
		padding:0 18rpx;
		margin: 36rpx 0;
		margin-left: 3rpx;
		border-left: 4px solid #10c696;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.all {
			display: flex;
			align-items: center;
			
			text {
				margin-right: 12rpx;
			}
		}
	}
	.intext{
		font-size: 14px;
		text-align: center;
		color: #999999;
	}
	.artic{
		width: 710rpx;
		height: 320rpx;
		border-radius: 40rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		
	}
	.artimg{
		width: 710rpx;
		height: 320rpx;
		border-radius: 40rpx;
	}
</style>
